<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../res/jquery.min.js"></script>
    <script src="../../src/bs.base.js"></script>
    <script src="../../src/bs.utils.js"></script>
    <script src="../../src/bs.using.js"></script>
    <style type="text/css">
        .target_fixed { height: 25px; padding: 1px; position: fixed; _position: absolute; top: 0; right: 0; }

        .custom_container { position: absolute; background-color: rgba(0, 0, 0, .5); background-color: #999\9; }

        .custom_container img { padding: 0; position: relative; top: -5px; left: -5px; }

    </style>
</head>
<body>
<div><a id="trigger1" href="javascript:;" rel="targetBox">默认rel加载</a> <br /></div>
 <span id="targetBox" style="display: none">1111</span>
<br/>

<a id="trigger9" href="/wordpress/">更多文章▼</a>


<br/>
<a id="trigger10" href="#">图片</a>
<br/>
<br/>
<button id="trigger7">点击测试</button>
<br/>
<br/>
<button id="trigger8">点击显示姓名列表▼</button>
<br/>
<br/>
输入密码：<input class="pwdTrigger" type="password" placeholder="6~20个字符"/>
再次输入：<input class="pwdTrigger" type="password" placeholder="输入与上面一样的密码"/>
<br/>
<br/>
<a class="tipTrigger" href="###" tip="摸我">摸我</a>
<a class="tipTrigger" href="###" tip="我也要">我也要</a>
<a class="tipTrigger" href="###" tip="还有我">还有我</a>

<br/>
右上角固定位置的操作提示层(ajax请求中提示，页面跳转中提示等)：
<span id="targetFixed" class="target_fixed"></span>
<button class="operateTrigger">登录</button>
<button class="operateTrigger">提交</button>
<button class="operateTrigger">刷新</button>
<br/>
自定义装载容器:
<div id="customContainer" class="custom_container"></div>
<input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="点击我"/>

<script>
       $(document).ready(function(){

           bs.powerFloat('#trigger1');
           bs.powerFloat('#trigger12', {
               eventType: "click",
               targetMode: "ajax",
               targetAttr: "src",
               container: $("#customContainer"),
               reverseSharp: true
           });
           $(".operateTrigger").click(function () {
               var txt = $(this).text();
               //IE6位置
               if (!window.XMLHttpRequest) {
                   $("#targetFixed").css("top", $(document).scrollTop() + 2);
               }
               //创建半透明遮罩层
               if (!$("#overLay").size()) {
                   $('<div id="overLay"></div>').prependTo($("body"));
                   $("#overLay").css({
                       width: "100%",
                       backgroundColor: "#000",
                       opacity: 0.2,
                       position: "absolute",
                       left: 0,
                       top: 0,
                       zIndex: 99
                   }).height($(document).height());
               }
               //显示操作提示，最关键核心代码

               bs.powerFloat('#targetFixed', {
                   eventType: null,
                   targetMode: "doing",
                   target: "正在" + txt + "中...",
                   position: "1-2"
               });
               //定时关闭，测试用
               setTimeout(function () {
                   $("#overLay").remove();
                   $.powerFloat.hide();
               }, 2000);
           });
           bs.powerFloat('#trigger10', {
               offsets: {
                   x: -10,
                   y: 22
               },
               //showDelay: 200,

               hoverHold: false,

               targetMode: "tip",
               targetAttr: "tip",
               position: "3-4"
           });


           bs.powerFloat('#trigger10',{target:'http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg',targetMode:'ajax'});

           bs.powerFloat('.pwdTrigger', {
               eventType: "focus",
               targetMode: "remind",
               targetAttr: "placeholder",
               position: "1-4"
           });


           bs.powerFloat('#trigger8', {
               width: "inherit",
               eventType: "click",
               target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "<a href='##'>更多 >></a>"],
               targetMode: "list"
           });

           bs.powerFloat('#trigger7',{
               eventType: "click",
               target: "http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg",
               targetMode: "ajax"
           });

           bs.powerFloat('#trigger9',{
               width: 250,
               target: [
                   {
                       href: "##",
                       text: "这是文章1的说"
                   },
                   {
                       href: "##",
                       text: "啊，看，文章2"
                   },
                   {
                       href: "##",
                       text: "啊啦，不好，我把文章3忘家里了！"
                   },
                   {
                       href: "##",
                       text: "马萨噶，这就是传说中的...文章4..."
                   },
                   {
                       href: "##",
                       text: "什么嘛，就是文章5，害我白期待一场"
                   }
               ],
               targetMode: "list"
           });
       });
   </script>
</body>
</html>